<template>
  <div>
    <el-card style="margin:20px;padding: 20px;">
      <el-row>
        <h3>{{type}}校企</h3>
      </el-row>
      <el-form :model="projectShow" :rules="showFromRules" ref="showRef">

        <el-form-item label="校企合作标题" prop="proTitle">
          <el-input placeholder="校企合作标题" v-model="projectShow.proTitle"></el-input>
        </el-form-item>

        <el-form-item label="校企合作类型" prop="proType">
          <el-select placeholder="校企合作类型" v-model="projectShow.proType">
            <el-option value="0" label="项目成果展示会"></el-option>
            <el-option value="1" label="企业专场招聘会"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="校企描述" prop="proDesc">
          <el-input
              type="textarea"
              :rows="4"
              placeholder="校企描述"
              v-model="projectShow.proDesc">
          </el-input>
        </el-form-item>
        <!-- 校企交流图片： -->
        <el-form-item label="校企交流图片">
          <!-- 头衔缩略图 -->
          <el-image v-if="projectShow.proImg" :src="projectShow.proImg"  style="width: 200px;height:200px;" >
          </el-image>
          <!-- 文件上传按钮 -->
          <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">
            上传图片
          </el-button>
          <!--
            v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调
            <input type="file" name="file"/>

          -->
          <image-cropper
              v-show="imageCropperShow"
              :width="300"
              :height="300"
              :key="imageCropperKey"
              :url="BASE_API"
              field="file"
              @close="close"
              @crop-upload-success="cropSuccess"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOrEdit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  name: "Add",
  created() {
    if (this.$route.params.id) {
      this.getProjectShow(this.$route.params.id)
    }
  },
  data() {

    return {
      projectShow: {},
      //控制图片缩略图是否显示
      imageCropperShow: false,
      //上传组件的唯一标识
      imageCropperKey: 0,
      //服务器的地址与端口号
      BASE_API: 'http://localhost:8001/cykj/fileOss',
      //表单校验规则
      showFromRules: {
        proTitle: [{required: true, message: '请填写校企标题', trigger: 'blur'}],
        proType: [{required: true, message: '请填写校企交流会类型', trigger: 'change'}],
        proDesc: [{required: true, message: '请填写校企描述', trigger: 'blur'}],
      }
    }
  },
  methods: {
    //获取校企资料
    async getProjectShow(id) {
      let result = await this.$http.project.reqGetShowById(id)
      if (result.code !== 200) return this.$message.error(result.message)
      this.projectShow = result.data.show

    },
    //添加校企
    saveShow() {
      this.$refs.showRef.validate(async valid => {
        // 返回校验结果的布尔值
        // console.log(valid);
        if (!valid) return this.$message.error('请填写完整的校企信息');
        let result = await this.$http.project.reqSaveShow(this.projectShow)
        if (result.code !== 200) return this.$message.error(result.message)
        this.$message.success('添加成功')
        this.$router.push("/project/list")
      })
    },
    //编辑校企
    editShow() {
      this.$refs.showRef.validate(async valid => {
        // 返回校验结果的布尔值
        if (!valid) return this.$message.error('请填写完整的校企信息');
        let result = await this.$http.project.reqEditShow(this.projectShow)
        if (result.code !== 200) return this.$message.error(result.message)
        this.$message.success("修改成功")
        this.$router.push("/project/list")
      })
    },
    //提交
    saveOrEdit() {
      if (this.$route.params.id) {
        this.editShow()
      } else {
        this.saveShow()
      }
    },
    //头像上传成功的回调的方法
    cropSuccess(data) {
      this.$message.success("上传成功")
      this.imageCropperShow = false
      //上传之后接口返回图片地址
      this.projectShow.proImg = data.url
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //关闭文件上传弹窗的方法
    close() {
      this.imageCropperShow = false
      //上传组件初始化
      this.imageCropperKey = this.imageCropperKey + 1
    },
  },
  components: {
    ImageCropper,
    PanThumb
  },
  computed:{
    //计算当前是编辑还是添加
    type(){
      return this.$route.params.id !== undefined ? '编辑':"添加"
    }
  }
}
</script>

<style scoped>

</style>
